<%@ page language="java" contentType="text/html; charset=ISO-8859-1" pageEncoding="ISO-8859-1"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<%@ taglib prefix="form" uri="http://www.springframework.org/tags/form"%>
<%@ taglib prefix="spring" uri="http://www.springframework.org/tags"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/functions" prefix="fn" %>
<h3>Update User Questions</h3>
<div>
	<p style="padding: 0;" id="responseMessage"></p>
</div>
<table id="temp_clone" style="display: none;" qCount="${fn:length(questForm.questions)}">
	<tr >
		<td>
			<img alt="" src="/static/images/forward.png">
		</td>
		<td>
			<textarea  name="questions[newIndex].questionDesc" 
				required="true" style= "width:500px;" ></textarea>
		</td>
		<td>
			<select class="questTypeSelect" name="questions[newIndex].questionTypeName" onchange="handleQuestTypeChange(this);" >
				<option value="TEXT">TEXT</option>
				<option value="SELECT_ONE">SELECT_ONE</option>
				<option value="MULTI_SELECT">MULTI_SELECT</option>
			</select>
		</td>
		<td> <input type="checkbox" name="questions[newIndex].nonLinkedInUser" >
			
		</td>
		<td> <input data-dojo-type="dijit.form.TextBox"  style="width: 5em;"  type="text" name="questions[newIndex].id" >
			
		</td>
	</tr>	
	<tr style="display: none;">
		<td></td>
		<td>
			<button currentQIndex=""   type="button" name="addOpt" value="addOpt" class="addOption" >+</button>
		</td>
		<td colspan="2">
			
		</td>
	</tr>
</table>

<div id="temp_clone_option"  style="display: none;"><span style="display: block;"><input data-dojo-type="dijit.form.TextBox"  value="" name="questions[newIndex].selectOptions[newIndex2]">  </span></div>

<form:form action="javascript:void(0)" dojoType="dijit.form.Form" commandName="questForm"
	id="updateQ" data-dojo-id="updateQ">
	<table>
		<c:forEach var="question" items="${questForm.questions}" varStatus="status">
				<tr>
					<td><img alt="" src="/static/images/forward.png">
					</td>
					<td>
						<textarea  name="questions[${status.index}].questionDesc" 
							required="true" data-dojo-type="dijit.form.Textarea" style= "width:500px;" >${question.questionDesc}</textarea>
					</td>
					<td>
						<c:set value="${questForm.questions[status.index].questionTypeName }" var="typename"></c:set>
						<select class="questTypeSelect"  name="questions[${status.index}].questionTypeName" data-dojo-type="dijit.form.Select" onchange="handleQuestTypeChange(this);" >
							<option value="TEXT" <c:if test="${typename eq 'TEXT'}">selected='selected'</c:if> >TEXT</option>
							<option value="SELECT_ONE" <c:if test="${typename eq 'SELECT_ONE'}">selected='selected'</c:if>>SELECT_ONE</option>
							<option value="MULTI_SELECT" <c:if test="${typename eq 'MULTI_SELECT'}">selected='selected'</c:if>>MULTI_SELECT</option>
						</select>
					</td>
					<td>					
						<input type="checkbox" name="questions[${status.index}].nonLinkedInUser" ${questForm.questions[status.index].nonLinkedInUser ? 'checked' : ''} >
					</td>
					<td>
						<input data-dojo-type="dijit.form.TextBox"  style="width: 5em;"  type="text" name="questions[${status.index}].id" value=" ${questForm.questions[status.index].id}"> 
					</td>
				</tr>	
							
				<tr <c:if test="${question.questionTypeName ne 'MULTI_SELECT' && question.questionTypeName ne 'SELECT_ONE' }"> style="display: none;"</c:if> >
					<td></td>
					<td>
						<c:forEach var="optValue" items="${question.selectOptions}" varStatus="status2">
							<span currentIndex="${status2.index + 1}" style="display: block;"><input data-dojo-type="dijit.form.TextBox"  value="${optValue}"   name="questions[${status.index}].selectOptions[${status2.index}]">  </span>
						</c:forEach>
						<button currentQIndex="${status.index}"   type="button" name="addOpt" value="+" class="addOption" >+</button>
					</td>
					<td colspan="2" > </td>
				</tr>
		</c:forEach>
		<tr id="qButtonRow">
			<td colspan="2">
				<button  type="button" name="add" value="add" id="addQuestion" >Add Question</button>
			</td>
		</tr>
	</table>
	<div>
		<button data-dojo-type="dijit.form.Button" type="submit" name="submit" value="submit" id="addQSubmitButton" >Submit</button>
	</div>
</form:form>